import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'
import '../../css/checkbox.css'

import Longmao from './longmao'
import House from './house'

class Games extends Component {
  constructor(props) {
    super(props)

    this.state = {
      night: false
    }
  }

  componentDidMount() {

  }

  handleInputChange =  (event) => {
    this.setState({night: event.target.checked });
  }



  render() {
    return (
      <div className={`sky ${this.state.night?'sky__night':''}`}>
        <div className="wrapper">
          <label>
            <input type="checkbox" name="check" id="check"
                   checked={this.state.night} onChange={this.handleInputChange} />
              <div className="sun-and-moon"></div>
          </label>
        </div>
        <div className={`stars-1 ${this.state.night?'stars__night':''}`}></div>
        <div className={`stars-2 ${this.state.night?'stars__night':''}`}></div>
        <div className={`stars-3 ${this.state.night?'stars__night':''}`}></div>
        <div className={`stars-4 ${this.state.night?'stars__night':''}`}></div>

        {/*<div className="longmao-box">*/}
          {/*<Longmao></Longmao>*/}
        {/*</div>*/}
        <div className="house-box"><House></House></div>

      </div>
    )
  }
}

export default Games;
